<template>
  <div>
    <el-input
      class="search-bar"
      v-model="key"
    >
      <template #append>
        <el-button
          color="#3271ae"
          style="width: 50px;
              background-color: #3271ae;
              border-radius: 0 5px 5px 0;
              color: #fff"
          @click="handleSearch()"
        >
          <el-icon>
            <Search />
          </el-icon>
        </el-button>
      </template>
    </el-input>
    <n-shopping-cart-button></n-shopping-cart-button>
  </div>
</template>

<script>
import NShoppingCartButtonVue from './NShoppingCartButton.vue';

export default {
  components: {
    NShoppingCartButton: NShoppingCartButtonVue
  },
  data() {
    return {
      key: "",
    };
  },
  methods: {
    handleSearch() {
      if (this.key !== "") {
        this.$router.push({ path: "/search", query: { key: this.key } });
      }
    },
  },
};
</script>

<style scoped>
.search-bar {
  width: 600px;
}

.search-button {
  width: 50px;
  background-color: #3271ae;
  border-radius: 0 5px 5px 0;
}
</style>